<template>
  <div class="order-detail">
    <div class="page-header">
      <h1>订单详情</h1>
      <el-button @click="$router.push('/orders')">返回列表</el-button>
    </div>
    
    <!-- 订单基本信息 -->
    <el-card>
      <template #header>
        <span>订单信息</span>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="订单号">{{ order.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag :type="getStatusType(order.status)">
            {{ getStatusText(order.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ order.createdAt }}</el-descriptions-item>
        <el-descriptions-item label="支付时间">{{ order.paidAt || '-' }}</el-descriptions-item>
        <el-descriptions-item label="发货时间">{{ order.shippedAt || '-' }}</el-descriptions-item>
        <el-descriptions-item label="完成时间">{{ order.completedAt || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    
    <!-- 客户信息 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>客户信息</span>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="客户姓名">{{ order.customerName }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ order.customerPhone }}</el-descriptions-item>
        <el-descriptions-item label="收货地址" :span="2">{{ order.shippingAddress }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    
    <!-- 商品信息 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>商品信息</span>
      </template>
      <el-table :data="order.items" style="width: 100%">
        <el-table-column label="商品图片" width="100">
          <template #default="{ row }">
            <el-image
              :src="row.image"
              style="width: 60px; height: 60px"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" />
        <el-table-column prop="sku" label="商品编号" width="120" />
        <el-table-column prop="price" label="单价" width="100">
          <template #default="{ row }">
            ¥{{ row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量" width="80" />
        <el-table-column prop="total" label="小计" width="100">
          <template #default="{ row }">
            ¥{{ row.total }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!-- 订单金额 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>订单金额</span>
      </template>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="amount-item">
            <span class="amount-label">商品总价：</span>
            <span class="amount-value">¥{{ order.subtotal }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="amount-item">
            <span class="amount-label">运费：</span>
            <span class="amount-value">¥{{ order.shippingFee }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="amount-item">
            <span class="amount-label">订单总额：</span>
            <span class="amount-value total">¥{{ order.totalAmount }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
    
    <!-- 物流信息 -->
    <el-card style="margin-top: 20px;" v-if="order.status !== 'pending' && order.status !== 'cancelled'">
      <template #header>
        <span>物流信息</span>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="物流公司">{{ order.shippingCompany || '-' }}</el-descriptions-item>
        <el-descriptions-item label="物流单号">{{ order.trackingNumber || '-' }}</el-descriptions-item>
      </el-descriptions>
      
      <el-timeline style="margin-top: 20px;" v-if="order.trackingInfo && order.trackingInfo.length > 0">
        <el-timeline-item
          v-for="(item, index) in order.trackingInfo"
          :key="index"
          :timestamp="item.time"
          :type="index === 0 ? 'primary' : ''"
        >
          {{ item.content }}
        </el-timeline-item>
      </el-timeline>
    </el-card>
    
    <!-- 操作按钮 -->
    <div class="action-buttons" style="margin-top: 20px;">
      <el-button
        v-if="order.status === 'processing'"
        type="success"
        @click="handleShip"
      >
        发货
      </el-button>
      <el-button
        v-if="order.status === 'pending'"
        type="warning"
        @click="handleCancel"
      >
        取消订单
      </el-button>
      <el-button
        v-if="order.status === 'shipped'"
        type="primary"
        @click="handleComplete"
      >
        确认收货
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const route = useRoute()

const order = ref({
  id: 1,
  orderNo: '20240904001',
  status: 'processing',
  createdAt: '2024-09-04 14:30:00',
  paidAt: '2024-09-04 14:35:00',
  shippedAt: null,
  completedAt: null,
  customerName: '张三',
  customerPhone: '13800138000',
  shippingAddress: '北京市朝阳区建国门外大街1号',
  items: [
    {
      id: 1,
      name: 'iPhone 15 Pro Max',
      sku: 'PHONE001',
      price: 9999,
      quantity: 1,
      total: 9999,
      image: 'https://via.placeholder.com/60x60/409EFF/FFFFFF?text=iPhone'
    },
    {
      id: 2,
      name: 'AirPods Pro 2',
      sku: 'AIRPODS001',
      price: 1999,
      quantity: 1,
      total: 1999,
      image: 'https://via.placeholder.com/60x60/67C23A/FFFFFF?text=AirPods'
    }
  ],
  subtotal: 11998,
  shippingFee: 0,
  totalAmount: 11998,
  shippingCompany: '顺丰速运',
  trackingNumber: 'SF1234567890',
  trackingInfo: [
    {
      time: '2024-09-04 14:30:00',
      content: '订单已创建'
    },
    {
      time: '2024-09-04 14:35:00',
      content: '订单已支付'
    },
    {
      time: '2024-09-04 15:00:00',
      content: '商家已接单'
    }
  ]
})

const getStatusType = (status) => {
  const types = {
    pending: 'warning',
    processing: 'info',
    shipped: 'primary',
    completed: 'success',
    cancelled: 'danger'
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    pending: '待付款',
    processing: '待发货',
    shipped: '已发货',
    completed: '已完成',
    cancelled: '已取消'
  }
  return texts[status] || status
}

const handleShip = () => {
  ElMessageBox.prompt(
    '请输入物流单号',
    '发货确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /^[A-Za-z0-9]+$/,
      inputErrorMessage: '请输入正确的物流单号'
    }
  ).then(({ value }) => {
    order.value.status = 'shipped'
    order.value.shippedAt = new Date().toLocaleString('zh-CN')
    order.value.trackingNumber = value
    ElMessage.success(`订单已发货，物流单号：${value}`)
  })
}

const handleCancel = () => {
  ElMessageBox.confirm(
    '确定要取消此订单吗？',
    '取消确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    order.value.status = 'cancelled'
    ElMessage.success('订单已取消')
  })
}

const handleComplete = () => {
  ElMessageBox.confirm(
    '确认客户已收到商品？',
    '确认收货',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }
  ).then(() => {
    order.value.status = 'completed'
    order.value.completedAt = new Date().toLocaleString('zh-CN')
    ElMessage.success('订单已完成')
  })
}

onMounted(() => {
  // 根据路由参数加载订单详情
  const orderId = route.params.id
  console.log('Loading order:', orderId)
})
</script>

<style scoped>
.order-detail {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 24px;
  color: #333;
}

.amount-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.amount-item:last-child {
  border-bottom: none;
}

.amount-label {
  color: #666;
}

.amount-value {
  font-weight: bold;
  color: #333;
}

.amount-value.total {
  color: #f56c6c;
  font-size: 18px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}
</style>
